<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../plugin/layui-v2.2.5/layui/css/layui.css">
  <!-- 教师应交材料页面 -->
</head>
<body style="overflow-y: scroll;">
  <div class="layui-row">
  	<div class="layui-col-md6">
	    <button id="addNew" data-method="setTop" class="layui-btn" style="float: left;margin-left: 10px">新建</button>
	    <button type="button" class="layui-btn" id="uploadFile">
	      <i class="layui-icon">&#xe67c;</i>上传文件
	    </button>  		
  	</div>
    <div class="layui-col-md6">
		<button id="addNew" data-method="search" class="layui-btn" style="float: right;margin-left: 10px">搜索</button>    
	    <input name="document_search" id="document_search" class="layui-input" type="text" style="float: right;width: 200px" >
    </div>
  </div>
  <div>
    <table class="layui-hide" id="demo"></table>  
  </div>
       

          
<script src="../plugin/layui-v2.2.5/layui/layui.js"></script>
<script src="../plugin/jquery-3.1.1.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>


layui.use(['table','layer','upload'], function(){
  var table = layui.table;

  table.render({
	    elem: '#demo'
	    ,url: '/CMA/courseDocument/getDocument'
	    ,method: 'post' 
	    ,done: function(res, curr, count){
	        //如果是异步请求数据方式，res即为你接口返回的信息。
	        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
	        console.log(res);
	      }
	    ,cols: [[ //标题栏
	      {field: 'courseName', title: '课程名', sort: true}
	      ,{field: 'teaherName', title: '上课教师'}
	      ,{field: 'workId', title: '工号'}
	      ,{field: 'className', title: '课程授课班级'}
	      ,{field: 'documenttype', title: '课程材料类型'}
	      ,{field: 'period', title: '授课学期'}
	      ,{field: 'status', title: '状态'}
	      ,{field: 'remark', title: '备注', sort: true}
	    ]]
	    //,data: tableData
	    ,skin: 'line' //表格风格
	    ,even: true
	    ,page: true //是否显示分页
	    ,limits: [5, 7, 10]
	    ,limit: 5 //每页默认显示的数量 
	    ,id : "documentGrid"
	 })
  
  var active = {
	locaTable : function(){
		
	},
    setTop: function(){
      var that = this; 
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 //此处以iframe举例
        ,title: '新增课程材料'
        ,area: [' 1000px','450px']
        ,shade: 0
        ,maxmin: true
        ,offset: 'auto'
        ,content: 'addNew.html'
        ,zIndex: layer.zIndex //重点1
        ,success: function(layero){
          layer.setTop(layero); //重点2
        }
      	,end: function(){
      		table.reload('documentGrid', {
      		  where: { //设定异步数据接口的额外参数，任意设
      		    
      		  }
      		  ,page: {
      		    curr: 1 //重新从第 1 页开始
      		  }
      		});
      	}
      });
    },
    search : function(){
    	var searchKey = $("#document_search").val();
    	console.log(searchKey);
    	table.reload('documentGrid', {
    		  where: { //设定异步数据接口的额外参数，任意设
    		    key: searchKey
    		    //…
    		  }
    		  ,page: {
    		    curr: 1 //重新从第 1 页开始
    		  }
    	});
    }
  };

  $('.layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });

  
  
  var upload = layui.upload;
  var uploadInst = upload.render({
    elem: '#uploadFile' //绑定元素
    ,url: '/CMA/courseDocument/uploadDocument' //上传接口
    ,accept: 'file' //普通文件
    ,done: function(res){
      console.log(res);
    }
    ,error: function(){
      //请求异常回调
    }
  });

  
  
});

</script>

</body>
</html>